import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

import { Menu } from 'tdesign-react';
import { HomeIcon, User1Icon } from 'tdesign-icons-react';

import './layout.css';

const { SubMenu, MenuItem } = Menu;

function Siderbar() {
    const navigate = useNavigate();
    const [active, setActive] = useState('/dashboard');

    const handleChange = (value) => {
        setActive(value);
        navigate(value);
    };

    return (
        <Menu value={active} onChange={handleChange}>
            <MenuItem value="/dashboard" icon={<HomeIcon />}>
                总览
            </MenuItem>
            <SubMenu value="1" title="用户管理" icon={<User1Icon />}>
                <MenuItem value="/user/list">用户列表</MenuItem>
            </SubMenu>
        </Menu>
    );
}

export default function Layout({ children }) {
    return (
        <div className='layout-wrapper'>
            <div className='header-wrapper'>

            </div>
            <div className='main-wrapper'>
                <div className='siderbar-wrapper'>
                    <Siderbar />
                </div>

                <div className='content-wrapper'>
                    {children}
                </div>
            </div>
        </div>
    );
}